<template>
  <div class="courseLiveBox">
    <!-- 左侧课程列表显示区域 -->
    <div class="courseListBox">
      <div v-for="(item,index) in list[leftIndex].courseList" :key="index" class="courseList">
        <div class="course_img">
          <img :src="list[leftIndex].courseList[index].url" />
        </div>
        <div class="course_con">
          <div class="course_con_title">{{ list[leftIndex].courseList[index].title }}</div>
          <div class="course_con_bottom">
            <!--<span>{{ list[leftIndex].courseList[index].hour }}/</span>-->
            <span>{{ list[leftIndex].courseList[index].money }} 元</span>
            <span>已售{{list[leftIndex].courseList[index].sale}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧课程编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightList">
        <!-- 头部提示区域 -->
        <header class="title">滑动课程列表设置</header>
        <div class="editCon">
          <div style="margin-top:20px;display: flex;align-items:center;">
            <span style="width:95px;text-align:right;display: inline-block;">选择分类：</span>
            <treeselect
              v-model="list[leftIndex].courseType"
              :multiple="false"
              :options="courseCategorys"
              @change="courseType($event)"
              style="width:200px;margin-left: 5px;"
            />
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">发布时间：</span>
            <el-select
              v-model="list[leftIndex].recentDay"
              placeholder="请选择"
              style="width:200px;"
              @change="recentDay($event)"
              value
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-top:20px;">
            <span style="width:95px;text-align:right;display: inline-block;">展示条数：</span>
            <el-select
              v-model="list[leftIndex].limit"
              placeholder="请选择"
              style="width:200px;"
              @change="limitNumber($event)"
              value
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { courseList } from '@/api/user/user' // 数据接口
import { getCategoryList } from '@/api/subject/category'
import { getTenantId } from '@/utils/auth'

export default {
  components: { Treeselect },
  props: ['list', 'leftIndex'],
  data() {
    return {
      courseCategorys: [],
      rightIndex: 0,
      categoryId: '',
      EduUserVo: {},
      fileList: [],
      keyWord: '',
      courseDialogVisible: false,
      classDialogVisible: false,
      dayValue: '',
      limitValue: '',
      logofile: '',
      linkTableData: [
        { name: 'class NO.1', price: '2', number: '2', createTime: '2' }
      ],
      dayOptions: [
        { value: '3', label: '最近3天' },
        { value: '7', label: '最近7天' },
        { value: '15', label: '最近15天' },
        { value: '30', label: '最近30天' }
      ],
      cascaderOptions: [],
      selectOptions: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
        { value: '5', label: '5' }
      ]
    }
  },
  mounted() {
    this.getCourseCategorys()
  },
  methods: {
    getCourseCategorys() {
      getCategoryList('course', getTenantId(),'0')
        .then(response => {
          this.courseCategorys = response.data.items
        })
        .catch(() => {})
    },
    getCourseList() {
      this.EduUserVo.tenantId = getTenantId()
      this.EduUserVo.categoryId = this.list[this.leftIndex].courseType
      this.EduUserVo.limit = this.list[this.leftIndex].limit
      this.EduUserVo.day = this.list[this.leftIndex].recentDay
      courseList(this.EduUserVo)
        .then(response => {
          this.list[this.leftIndex].courseList = response.data.items
          this.list[this.leftIndex].courseList.map(i => {
            i.url = i.largePicture
            i.liveStatus = i.status
            i.teacher = i.userName
            i.money = i.price
          })
        })
        .catch(() => {})
    },
    courseType(item) {
      this.list[this.leftIndex].courseType = item[item.length - 1]
      this.getCourseList()
    },
    recentDay() {
      this.getCourseList()
    },
    limitNumber() {
      this.getCourseList()
    }
  }
}
</script>

<style lang="scss" scoped>
.courseLiveBox {
  .courseListBox {
    width: 100%;
    height: 200px;
    display: flex;
    overflow: auto;
    padding: 10px;

    .courseList {
      width: 33%;
      height: 98%;
      margin-right: 1.3%;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 4px 10px #eee;

      .course_img {
        width: 100%;
        // height: 112px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .course_con {
        padding: 0 5px;

        .course_con_title {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          height: 32px;
        }
        .course_con_bottom {
          margin-top: 8px;
          display: flex;
          color: #616161;
          align-items: flex-end;

          span:nth-child(1) {
            font-size: 14px;
            color: #f74040;
          }

          span:nth-child(2) {
            font-size: 12px;
            color: #444;
            margin-left: auto;
          }
        }
      }
    }
  }
}

.editRightList {
  width: 400px;
  position: absolute;
  left: 105%;
  top: 0;
  padding: 10px;
  border: 1px solid #e1e1e1;
  background-color: #fafafa;

  .title {
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #e1e1e1;

    .help-text {
      font-size: 12px;
      color: #616161;
      margin-top: 5px;
    }
  }

  .editCon {
    background-color: #fff;
    padding: 10px 5px;
    border: 1px solid #e1e1e1;
    margin-top: 5px;
  }
}
</style>
